<template>
  <section>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="file_name"
          label="文件名">
      </el-table-column>
      <el-table-column
          prop="file_sizes"
          label="文件大小（KB）">
        <template scope="scope">
          {{scope.row.file_sizes | filterSize}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template scope="scope">
          <el-button @click="toView(scope.row)" type="primary" size="small">查看</el-button>
          <el-button @click="downloadFile(scope.row)" type="primary" size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="文件内容" v-model="isLogShow">
      <pre style="white-space: pre-wrap;word-wrap: break-word;">
        {{fileContent}}
      </pre>
    </el-dialog>
  </section>
</template>
<script>
  import dao from '../../common/dao'
  import util from '../../common/util'
  export default {
    components: {},
    data() {
      return {
        query: {},
        tableData: [],
        isLogShow:false,
        fileContent:"",
      }
    },
    methods: {
      toView(row){
        let hdfs_path = row.hdfs_path
        dao.readFile({hdfs_path}).then(res=>{
          if(res.FX.err) return false;
          this.fileContent = res.body.file_content||''
          this.isLogShow = true;
        })
      },
      downloadFile(row){
        this.$confirm('确定要下载该文件吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let downfile = `${row.hdfs_path}`;
          dao.download({hdfs_path: downfile});
        }).catch(() => {
        });

      },
      pageInit(){
        this.query = this.$store.state.route.query || {};
        let hdfs_dir = this.query.hdfs_dir
        dao.findByPath({hdfs_dir}).then(res => {
          if (res.FX.err) return;
          this.tableData = res.body.hdfs_files_list;
        })
      }
    },
    mounted () {
      this.pageInit()
    }
  }
</script>

<style scoped>
</style>